<template>
  <div class="sj">
    <div class="i"></div>
    <div class="o" style="writing-mode: tb-rl">双线质量管控体</div>
    <div class="o1" style="writing-mode: tb-rl">
      力求每件产品、每个细节都尽善尽美
    </div>
    <div class="o2" style="writing-mode: tb-rl">够专业 才放心</div>
    <div class="i1"></div>
    <div></div>
    <div class="container">
      <div class="a">欢迎使用</div>
      <div class="b">系统登陆</div>
      <div>
        <el-form
          :model="ruleForm"
          :hide-required-asterisk="true"
          :rules="rules"
          ref="ruleForm"
          label-width="60px"
          class="inputBox"
        >
          <div class="inputDiv">
            <el-form-item label="用户名" prop="userName">
              <el-input autosize v-model="ruleForm.userName">
                <img slot="prefix" class="inputIcon" src="../assets/yonghuming.png" />
              </el-input>
            </el-form-item>
          </div>
          <div class="inputDiv">
            <el-form-item label="密  码" prop="passWord">
              <el-input autosize type="password" v-model="ruleForm.passWord">
                <img
                  slot="prefix"
                  class="inputIcon"
                  src="../assets/mima.png"
                />
              </el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="w">
        <div class="r" @click="submitForm">登录</div>
      </div>
    </div>
    <div class="t">All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号</div>
    <div class="y">ORDER聚造</div>
    <div class="u">ORDER聚造</div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  name: "login",
  components: {},
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/login",
            method: "POST",
            data: {
              userName: this.ruleForm.userName,
              passWord: md5(this.ruleForm.passWord),
              platform: "Web",
            },
          }).then((res) => {
            if (!res.errorMsg) {
              localStorage.setItem("token", res.token);
              localStorage.setItem("user", JSON.stringify(res));
              this.$router.push("/index");
            }
          });
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
.sj {
  width: 100%;
  height: 100%;
  margin-top: -24px;
  background-image: url(../assets/tuceng.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bj {
  width: 100%;
  height: 100%;
}
.container {
  position: relative;
  width: 359px;
  height: 359px;
  top: 223px;
  left: 1025px;
  background: #efeff0;
  border-radius: 20px 20px 20px 20px;
  opacity: 0.9;
}
.a {
  width: 52px;
  height: 16px;
  margin-top: 23px;
  margin-left: 32px;
  font-size: 13px;
  font-weight: normal;
  color: #96a3b0;
  line-height: 0px;
  padding-top: 20px;
}
.b {
  width: 133px;
  height: 85px;
  margin-top: 15px;
  margin-left: 32px;
  font-size: 27px;
  font-weight: normal;
  color: #4e4e4e;
  line-height: 0px;
}
.w {
  width: 302px;
  height: 38px;
  background: #409eff;
  border-radius: 19px 19px 19px 19px;
  opacity: 1;
  margin-top: 33px;
  margin-left: 31px;
}
.r {
  width: 32px;
  height: 20px;
  padding-top: 16px;
  margin-left: 135px;
  font-size: 16px;
  font-weight: normal;
  color: #f4f4f5;
  line-height: 0px;
}
.r:hover {
  opacity: 0.8;
  cursor: pointer;
}
.t {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #565656;
  position: fixed;
  left: -12%;
  right: 0;
  bottom: 24px;
}
.y {
  width: 200px;
  height: 46px;
  margin-left: 1119px;
  font-size: 36px;
  font-weight: normal;
  color: #d7e8fa;
  line-height: 0px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5px;
}
.u {
  width: 112px;
  height: 25px;
  margin-left: 1119px;
  margin-top: -30px;
  font-size: 20px;
  font-weight: normal;
  color: #409eff;
  line-height: 0px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
}
.i {
  position: absolute;
  width: 118px;
  height: 162px;
  margin-left: 85px;
  top: 202px;
  background: #e1f2f9;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.3;
}
.i1 {
  position: absolute;
  width: 118px;
  height: 162px;
  margin-left: 157px;
  top: 364px;
  background: #e1f2f9;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.3;
}
.o {
  position: absolute;
  width: 18px;
  top: 220px;
  left: 130px;
  font-size: 18px;
  font-weight: normal;
  color: #fefefe;
  line-height: 0px;
}
.o1 {
  position: absolute;
  top: 220px;
  left: 190px;
  font-size: 18px;
  font-weight: normal;
  color: #fefefe;
  line-height: 0px;
}
.o2 {
  position: absolute;
  width: 20px;
  top: 282px;
  left: 220px;
  font-size: 28px;
  font-weight: normal;
  color: #6bb9da;
  line-height: 0px;
}
.inputBox {
  margin-left: 20px;
}
.Name {
  width: 40px;
  height: 16px;
  margin-top: 10px;
  font-size: 13px;
  color: #737474;
  line-height: 16px;
  text-align: justify;
  text-align-last: justify;
}
input {
  width: 230px;
  height: 37px;
  margin-left: 9px;
  border-radius: 5px 5px 5px 5px;
  border: 2px solid #dfefff;
}
.inputDiv {
  margin-right: 36px;
  height: 50px;
  margin-top: 11px;
}
.inputIcon {
  width: 14px;
  height: 14px;
  margin-top: 12px;
  margin-left: 8px;
}
</style>